import Head from 'next/head';
import Link from 'next/link'
import styles from '../styles/Home.module.css';
import Router from 'next/router';
import axios from 'axios';

function Home(props) {
  console.log(props);

  const handleItemClick = (item) => {
    console.log(item);
    Router.push({
      pathname: "/recommend",
      query: {
        id: item
      }
    })
  }

  return (
    <div>
      <div className={styles.title}>Home</div>
      <h2>Banner</h2>
      <h2>Recommend</h2>
      <ul>
        {
          [1, 2, 3].map(item => {
            //1.
            // return <Link 
            //           key={item}
            //           href={`/recommend/?id=${item}`}
            //         >
            //           <li>
            //             推荐列表{item}
            //           </li>
            //         </Link>

            //2.
            return <li key={item} onClick={e => handleItemClick(item)}>
                    推荐列表{item}
                   </li>
          })
        }
      </ul>

      {/* a标签的跳转是重新从服务端请求/about-> 服务端渲染 */}
      {/* <a href="/about">关于</a> */}
      {/* next/Link标签的跳转-> 前端渲染 */}
      {/* <Link href="/about">关于</Link> */}
    </div>
  )
}

// 在next上发送网络请求，给组件添加一个属性这个属性可以是一个函数
export async function getStaticProps() {
  const res = await axios({
    url: "http://123.207.32.32:8000/home/multidata"
  });

  return {
    props: {
      name: "yzh",
      banners: res.data.data.banner.list
    }
  }
}

export default Home
